<template>
	<view class="index">
		<navigator url="/pages/SearchMusic/SearchMusic">
			<view class="search flex-center">
				<uni-icons type="search" color="#7a7a7a" size="1.5em"></uni-icons>
				&nbsp搜索
			</view>
		</navigator>

		<!-- 歌单分类 -->
		<view class="SongListCategories">
			<view>歌单分类 <span @click="toCateGoryList">全部分类<uni-icons type="right"></uni-icons></span></view>
			<view>
				<view v-for="(item,index) in cateGories" @click="toSongLists(item.items[0].categoryId)">
					{{item.items[0].categoryName}}
				</view>
			</view>
		</view>

		<!-- 热门歌单 -->
		<view class="Playlist">
			<view>推荐歌单</view>
			<scroll-view scroll-x="true">
				<view class="PlaylistScroll">
					<view v-for="item in recomPlaylist" :key="item.content_id"
						@click="toSongListDetail(item.content_id)">
						<view>
							<image :src="item.cover" mode="aspectFit"></image>
							<view>
								<span style="font-size: 1em;" class="iconfont icon-bofang"></span>
								{{(item.listen_num/10000).toFixed(1)}}万
							</view>
						</view>
						<view>{{item.title}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		

		<AudioPlayer></AudioPlayer>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		GetRecommend,
		GetSongListCategories
	} from "@/utils/MusicAPI.js"
	import {
		toCateGoryList,
		toSongLists,
		toSongListDetail
	} from "@/utils/Redirect.js"
	const recomPlaylist = ref([])
	// 获取首页推荐
	GetRecommend().then(res => {
		//console.log(res.data.response)
		recomPlaylist.value = res.data.response.recomPlaylist.data.v_hot
	}).catch(err => {
		console.log("获取搜索提示错误", err)
	})
	const cateGories = ref([])
	//获取歌单分类
	GetSongListCategories().then(res => {
		cateGories.value.push(...res.data.response.data.categories)
		uni.setStorage({
			key: "cateGories",
			data: cateGories.value
		})
		//console.log("歌单分类", cateGories.value)

	}).catch(err => {
		console.log("获取搜索提示错误", err)
	})
</script>

<style scoped>
	.index {
		padding: 0 10rpx;
	}

	image {
		width: 100%;
		height: 100%;
	}

	/* 热门歌单 */
	.Playlist {
		margin: 20rpx 0;
	}

	.Playlist>view:nth-child(1) {
		font-weight: bold;
	}

	.PlaylistScroll {
		margin-top: 20rpx;
		display: grid;
		grid-template-columns: repeat(50, 31%);
		grid-column-gap: 10rpx;

	}



	.PlaylistScroll>view>view:nth-child(1) {
		aspect-ratio: 1/1;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 5rpx;
		position: relative;
		background-color: rgba(45, 45, 53, 1.0);
	}

	.PlaylistScroll>view>view:nth-child(1)>view {
		position: absolute;
		bottom: 0;
		right: 0;
		padding: 1% 5%;
		border-radius: 50px;
		background-color: rgba(27, 27, 37, 0.6);
		font-size: 0.7em;
	}

	.PlaylistScroll>view>view:nth-child(2) {
		font-size: 0.8em;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	/* 歌单分类 */
	.SongListCategories {
		margin: 20rpx 0;
	}

	.SongListCategories>view:nth-child(1) {
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.SongListCategories>view:nth-child(1)>span {
		color: #7a7a7a;
		font-weight: 1000;
		font-size: 0.9em;
	}

	.SongListCategories>view:nth-child(2) {
		display: grid;
		grid-template-columns: repeat(3, 33.4%);
		justify-content: space-between;
		text-align: center;
	}

	.SongListCategories>view:nth-child(2)>view {
		padding: 5% 0;
		margin: 5%;
		background-color: #23232d;
		border-radius: 5px;

	}
</style>